<template>
  <div class="login-container">
    <div
      id="gradeNineChart"
      :style="{ width: '95%', height: '400px' }"
    />
  </div>
</template>

<script>
// import echarts from "echarts";
// import * as echarts from 'echarts';
import { getPhoneTimeReport } from '@/api/echarts'
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data() {
    return {
      area: ['1分钟以内', '1-5分钟', '5-10分钟', '10分钟以上'],
      cost: [2, 6, 1, 2]
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getPhoneTimeReport()
  },
  mounted() {
    setTimeout(() => {
      this.drawLine()
    }, 300)
  },
  methods: {
    getPhoneTimeReport() {
      getPhoneTimeReport().then((res) => {
        // console.log(res.data.data);
        const aa = []
        for (var i = 0; i < res.data.data.length; i++) {
          aa.push(res.data.data[i].value)
          this.cost = aa
        }
        this.drawLine()
      })
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const gradeNineChart = this.$echarts.init(
        document.getElementById('gradeNineChart')
      )
      // 绘制图表
      gradeNineChart.setOption({
        title: { text: '通话时长数据对比', x: 'center' },
        tooltip: {
          trigger: 'axis',
          formatter: '{a} <br/>{b} : {c}(条)',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.area,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            name: '                  通话数量：条',
            type: 'value'
          }
        ],
        series: [
          {
            name: '通话数量',
            type: 'bar',
            barWidth: '60%',
            data: this.cost,
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorlist = [
                    '#F2501F',
                    '#f37b1d',
                    '#fbbd08',
                    '#A7F22E',
                    '#39b54a',
                    '#1cbbb4',
                    '#0081ff',
                    '#6739b6',
                    '#9c26b0',
                    '#e03997',
                    '#AF298B',
                    '#a5673f',
                    '#D6E029',
                    '#89AF29',
                    '#AFAA29',
                    '#1FF2CB',
                    '#21D1F2',
                    '#24A7F2'
                  ]
                  return colorlist[params.dataIndex]
                }
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
